<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>前端基础作业</title>
<!--		<link rel="stylesheet" href="style.css">-->
		<link rel="stylesheet" href="{{ STATIC_URL }}open/css/style.css">
			<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<!-- <script src="script/jQuery3.6.0.js"></script> -->
		<script>
			$(function() {
				const data = {
					"HuangShan": {
						"productId": 3,
						"name": "黄山",
						"tabContentLst": [{
								"img": "https://dimg03.c-ctrip.com/images/10010p000000g1ipu47D7_C_500_280.jpg",
								"prdNme": "黄山+宏村4天3晚跟团游(4钻)·【经典热卖·口碑优选】20人小团·满2成人立减200『 1 晚夜宿1600米黄山顶· 缤纷秋色入画来· 日出云海 + 2 晚市区5钻· CBD商圈闹中取静· 逛吃方便』 不得不来的人气景点黄山 + 宏村 & 含门票 + 往返景交 ",
								"price": {
									"amt": 1849
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/0303l120008qi8w679380_C_500_280.jpg",
								"prdNme": "⻩⼭+宏村3⽇2晚跟团游(5钻)·【携程⾃营·诗画徽州】20⼈⼩团『AB线挂牌五星酒店 / CD线洲际旗下· 皇冠假⽇ 酒店 & 赠皇冠⾃ 助晚餐』 连住不挪窝 & 登⻩⼭ 览胜景 + ⽔墨宏村 + 半天⾃ 由活动 & 赠⻩⼭ 往返景交 + 接送站 7 *24 H旅⾏ 客服 ",
								"price": {
									"amt": 1159
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/300l190000016fzdh0E19_C_500_280.jpg",
								"prdNme": "⻩⼭3⽇2晚跟团游(4钻)·CEO推荐.2⼈减160 ⻩⼭赏秋『1晚⼭顶四星标间+2早3正餐 + 登⼭ 3 宝 + 38 元景交 + 24 h免费接送』 观⽇ 出云海.⽇落晚霞 导游带领登⼭.深度游⼤ 好河⼭ | CD线2晚市区连住赠⽔ 墨宏村 | 专属私⼈ 管家 | 秋游热荐 ",
								"price": {
									"amt": 1196
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/300112000000ss9w496C6_C_500_280.jpg",
								"prdNme": "安徽⻩⼭+宏村3⽇2晚跟团游(4钻)·⼈⽓产品·⽉销奇迹·20⼈⼩团『1晚⻩⼭⼭顶标间 + A线宿市区逛⽼ 街 / C线宿宏村奇墅湖赠阿菊演出』⽇ 出⽇ 落 / ⻄海⼤ 峡⾕ / ⽔墨宏村 含景点⻔ 票 + 往返景交 +免费接送站 + 1 对1私⼈ 管家· 100 % 纯玩 ",
								"price": {
									"amt": 1702
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/0302q120008xf07vw3E26_C_500_280.jpg",
								"prdNme": "宏村+婺源3⽇2晚跟团游(5钻)·【携程⾃营·天凉好个秋】20⼈⼩团 漫步篁岭|晒秋⼈ 家· 天街古巷 + ⾏摄宏村 | 多彩秋⾊ 2 晚连住市区五星酒店 & ⾃由逛⽼ 街 + ⻔票缆⻋ 全含 赠24H接送站 纯玩 / ⼀站式服务 / 轻松不累 爸妈放⼼ 游 ",
								"price": {
									"amt": 1189
								}
							},
							{
								"img": "https://dimg03.c-ctrip.com/images/fd/tg/g4/M09/B5/34/CggYHVZdCySAMYCNABVKJzG8yZg854_C_500_280.jpg",
								"prdNme": "⻩⼭3⽇2晚跟团游(4钻)·秋游热点@2⼈⽴减88|⻓者享⽴减『1晚宿⼭顶+1晚⽼街5 钻酒店 + 2 早3正餐 + ⻩⼭38 元景交 + 赠登⼭ 3 宝』 宿1600⽶⼭ 顶观⽇ 出云海 | 暖⼼ 导游伴游登⼭ | ⼭顶标间或多⼈可选 | 宏村景点可选 | 纯玩安⼼ 游 ",
								"price": {
									"amt": 1459
								}
							},
							{
								"img": "https://dimg03.c-ctrip.com/images/100c0z000000nbvinF35C_C_500_280.jpg",
								"prdNme": "⻩⼭+宏村4⽇⾃由⾏(4钻)·【1晚⻩⼭市区+1晚⻩⼭⼭顶+1晚宏村内】看“⽜形村落” - 宏村· 南湖春晓，⽉ 沼⻛ 荷， 双溪映碧 | ⼊住⼭ 顶1晚· 坐看⽇ 出⽇ 落· 峰峦如幻· 奇⽯ 林⽴『⾼ 铁往返』 ",
								"price": {
									"amt": 1147
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/300j14000000x3hz0C4AC_C_500_280.jpg",
								"prdNme": "⻩⼭⻛景区3⽇2晚跟团游(4钻)·【携程⾃营·多彩⻩⼭】2成⼈⽴减100元 20⼈⼩团 AB线· 1 晚市区5钻酒店 + 1 晚⻩⼭⼭ 顶标间· 观⽇ 出云海『 后⼭ 上· 前⼭ 下· 不⾛ 回头路 & ⾏程更轻松』 | CD线· 2晚连住市区酒店【⻩⼭⼀ 地· 推荐线路】 ",
								"price": {
									"amt": 1129
								}
							}
						]
					},
					"ShangHai": {
						"productId": 2,
						"name": "上海",
						"tabContentLst": [{
								"img": "https://dimg04.c-ctrip.com/images/03025120008vokgk294A5_C_500_280.png",
								"prdNme": "露营·|上海美帆精致露营2⽇过夜体验| 【Glamping套装租赁】美学⽣活/⾃助搭建， 含精致帐篷 + 天幕 + 桌椅，⼀ 应俱全 + 24⼩ 时热⽔ 淋浴， 多项⽬ 玩乐可选， 体验淀⼭ 湖畔⾃ 然⽣ 活 ",
								"price": {
									"amt": 428
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/300v0x000000liuks9C9C_C_500_280.jpg",
								"prdNme": "上海2⽇1晚⾃由⾏(4钻)·【亲⼦游&萌娃的爱】住海昌海洋公园度假酒店1晚+上海海昌海洋公园⻔ 票2张· 跨⽇⽆ 限次⼊ 园！ 畅游2⽇ 玩到爽！ 海豚 企鹅 美⼈⻥ | 和海洋⽣ 物亲密接触！ ",
								"price": {
									"amt": 640
								}
							},
							{
								"img": "https://dimg03.c-ctrip.com/images/fd/tg/g2/M07/8B/4D/Cghzf1Ww4EKAIJf0AA-a5kIApP4409_C_500_280.jpg",
								"prdNme": "华东5市+乌镇6⽇5晚跟团游(4钻)·赏秋品蟹+升2晚5钻+4正餐50餐标+含灵⼭⻔票 &升级梵宫⾃ 助【⾃ 营⼒ 荐· 枕⽔ 华东】⼉ 童含早「 精华全含」 乌镇 + 周庄双⽔ 乡⻄ 湖游船 + 赠送周庄电瓶⻋【 真纯玩⽆ 购物】 ",
								"price": {
									"amt": 1149
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/0301m120008jvszyl7522_C_500_280.jpg",
								"prdNme": "上海+苏州+杭州+乌镇5⽇4晚跟团游(5钻)·古镇枫叶&杭城桂⾬&⾦秋品蟹·全程5钻 & 1 晚乌镇· 汉服体验『⾃ 营精品· 纯玩打卡』 宿乌镇内 / 外可选【 明星漫游· 步⼊ 江南百景】 宋城⾃ 选 20 % 空座率『 餐标50⽔ 乡宴 & 桃源餐 & ⻰井品茶』 ",
								"price": {
									"amt": 949,
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/0302a120008s16afjB861_C_500_280.png",
								"prdNme": "上海+苏州+杭州+乌镇4⽇3晚跟团游(5钻)·2成⼈⽴减200『⻄塘抖⾳⼤赛赢好礼！ 赠⻄ 溪摇橹船· 夜宿乌镇5钻客栈· 登⾼ 赏上海夜景 + 深度⻄ 湖 + ⻄栅提灯⾛ 桥 + 世遗留园· 餐标50⽔ 乡宴 & ⻰井茶宴』 赠⻄ 湖⼿ 绘地图⼀⻋ 到底不拼团 ",
								"price": {
									"amt": 699
								}
							},
							{
								"img": "https://dimg03.c-ctrip.com/images/100d0u000000iuw5z6A17_C_500_280.jpg",
								"prdNme": "上海2-10⽇⾃由⾏·【超级⾃由⾏】出游天数⾃定义 · ⽀持双酒店体验 · 酒店星级随⼼ 选·⾏ 程⾃ 由搭配·⼀ 站式满⾜ 出游需求【 外滩 / 南京路 / 迪⼠ 尼度假区 / 淮海路 / 静安寺 摩登上海 等你开启】『 不含⼤ 交通』 ",
								"price": {
									"amt": 262
								}
							},
							{
								"img": "https://dimg03.c-ctrip.com/images/100a0t000000ipwplA539_C_500_280.jpg",
								"prdNme": "上海迪⼠尼（Disney）+杭州+苏州+乌镇5⽇4晚跟团游(5钻)·可选迪⼠尼Vip礼宾⾦ 秋纯玩『 + 1 元购80餐劵』 三5A· 世遗留园 + ⽹红乌镇⽇ 与夜 + 深度⻄ 湖· 南北全景 + 外滩专属服务中⼼【 夜宿乌镇】 三宴·⾼ 餐标50元 ",
								"price": {
									"amt": 1599
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/300m0a0000004nrr2249A_C_500_280.jpg",
								"prdNme": "上海+苏州+杭州+⽆锡+南京+乌镇6⽇5晚跟团游(4钻)·纯玩⼩团【升2晚5钻宿乌镇 + ⽹红拈花湾客栈 + 赠汉服游园】 2 进⻄ 栅 + 拈花湾深度游『 登雷峰塔 + ⻜来峰寻宝』 4 正餐50餐标 & 景区⾃ 助 + ⼉童含早 赠禅夜秀⾏ 程轻松 赠24H接机 ",
								"price": {
									"amt": 992
								}
							}
						]
					},
					"HangZhou": {
						"productId": 3,
						"name": "杭州",
						"tabContentLst": [{
								"img": "https://dimg04.c-ctrip.com/images/0302e120008jvszir91BF_C_500_280.jpg",
								"prdNme": "苏州+乌镇+杭州3⽇2晚跟团游(5钻)·戏剧节！古镇枫叶&杭城桂⾬&⾦秋品蟹·全程5 钻 + 1 晚乌镇· 汉服体验『⾃ 营精品』 宿乌镇内 / 外可选【 明星漫游· 江南百景】 20 % 空座率『 三顿餐标50⽔ 乡宴 &桃源餐 & ⻰井品茶』 ",
								"price": {
									"amt": 549
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/0303u120006swk805EF4A_C_500_280.jpg",
								"prdNme": "苏州+乌镇+杭州3⽇2晚跟团游(5钻)·明星万⼈纯玩『全程5钻+夜宿乌镇 深度⻄湖·南北全景』 三5A景⼁ 世遗· 留园 + ⽹红乌镇⽇ 夜景 + 全景⻄ 湖⼁ 甄选全明星阵容 专⻋ 专导【 三宴50⾼ 餐标】 苏宴 + 乌镇⽔ 乡宴 + 乾隆御茶宴 ",
								"price": {
									"amt": 543
								}
							},
							{
								"img": "https://dimg03.c-ctrip.com/images/fd/tg/g2/M07/8B/4D/Cghzf1Ww4EKAIJf0AA-a5kIApP4409_C_500_280.jpg",
								"prdNme": "华东5市+乌镇6⽇5晚跟团游(4钻)·赏秋品蟹+升2晚5钻+4正餐50餐标+含灵⼭⻔票 &升级梵宫⾃ 助【⾃ 营⼒ 荐· 枕⽔ 华东】⼉ 童含早「 精华全含」 乌镇 + 周庄双⽔ 乡⻄ 湖游船 + 赠送周庄电瓶⻋【 真纯玩⽆ 购物】 ",
								"price": {
									"amt": 1149
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/300l12000000rva7m3963_C_500_280.jpg",
								"prdNme": "苏州+乌镇+杭州3⽇2晚跟团游(4钻)·【苏州5钻+乌镇4/5钻酒店】⼀天⼀城+纯玩乌镇⽇ / 夜景 + 5 A园林 + 寒⼭ 寺 + 船游⻄ 湖 / 可选宋城千古情 B / C线宿5钻乌镇外 / 内酒店， 可多次⼊ 园 + 免费电瓶⻋ +泳池 含2早可选杭州御茶宴 ",
								"price": {
									"amt": 499
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/300k0q000000gj411B3E4_C_500_280.jpg",
								"prdNme": "杭州+乌镇+⻄塘3⽇2晚跟团游(5钻)·错峰赏秋『夜宿乌镇5钻+升级杭州挂牌5星&⽹红乌镇玩1整天』 5 钻⾃ 助早 & 50 御茶宴【 经典5A3⽔ 乡 乌镇 + 南浔 + ⻄塘】 赠200元⾃ 费双游船⻔ 票超450元【 B线下午出发 D线含宋城】 纯玩优选 ",
								"price": {
									"amt": 498
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/0301m120008jvszyl7522_C_500_280.jpg",
								"prdNme": "上海+苏州+杭州+乌镇5⽇4晚跟团游(5钻)·古镇枫叶&杭城桂⾬&⾦秋品蟹·全程5钻 & 1 晚乌镇· 汉服体验『⾃ 营精品· 纯玩打卡』 宿乌镇内 / 外可选【 明星漫游· 步⼊ 江南百景】 宋城⾃ 选 20 % 空座率『 餐标50⽔ 乡宴 & 桃源餐 & ⻰井品茶』 ",
								"price": {
									"amt": 949
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/300g0s000000hzkxa432D_C_500_280.jpg",
								"prdNme": "乌镇+杭州2⽇1晚跟团游·赏⻄栅⽇夜全景 纯玩⽆购物【⼀整天360打卡⽹红乌镇】 拒绝⾛⻢ 观花 + 【泛⾈⻄ 湖赏美景】 + A线住乌镇⾃ 营5钻客栈 + 多次⼊ 园 + 赠晚餐， 可升级C线⼊ 住乌镇⻄ 栅景区内5钻酒店 ",
								"price": {
									"amt": 399
								}
							},
							{
								"img": "https://dimg04.c-ctrip.com/images/0302a120008s16afjB861_C_500_280.png",
								"prdNme": "上海+苏州+杭州+乌镇4⽇3晚跟团游(5钻)·2成⼈⽴减200『⻄塘抖⾳⼤赛赢好礼！ 赠⻄ 溪摇橹船· 夜宿乌镇5钻客栈· 登⾼ 赏上海夜景 + 深度⻄ 湖 + ⻄栅提灯⾛ 桥 + 世遗留园· 餐标50⽔ 乡宴 & ⻰井茶宴』 赠⻄ 湖⼿ 绘地图⼀⻋ 到底不拼团 ",
								"price": {
									"amt": 699
								}
							}
						]
					}
				}

				let productLi = ''
				const setProductLi = () => {
					Object.keys(data).forEach(key => {
						productLi += `<li product-name="${key}">${data[key].name}</li>`
					})
					$('.product-nav').html(productLi)
					productLi = ''
				}

				setProductLi()

				const setProductContent = (data) => {
					return `
				 <div class="product-item">
				 <a href="${data.img}" target="_blank">
				 <div class="product-item-thumbnail">
				 <img src="${data.img}" alt="">
				 </div>
				 </a>
				 <p class="product-item-name">
				 ${data.prdNme}
				 </p>
				 <p class="product-item-info">
				 <span class="price"><dfn>¥</dfn>${data.price.amt}<i class="price_info">起</i></span>
				 </p>
				 </div>
				 `
				}

				let productContent = ''
				// 因为我们点击不同的li需要更新我们的对应展示的数据，所以提供一个更新图片列表的函数
				/** 循环更新目的地数据 */
				const updateHtml = (name = 'HuangShan') => {
					const currentData = data[name]
					currentData['tabContentLst'].forEach(tab => {
						productContent += setProductContent(tab)
					})
					// 给当前点击的li增加选中的class 进行高亮
					$(`li[product-name=${name}]`).addClass('active')
					$(".produce-content").html(productContent)
					productContent = ''
				}
				updateHtml() // 执行一次默认创建
				/** 事件委托 每个地址变化更新目的数据 将点击事件绑定到我们的导航区域，因为我们的li 元素是动态
				  渲染的 */
				$('.product-nav').click(function(e) {
					if (e.target.nodeName !== 'LI') {
						return
					}
					const currentLi = $(e.target) // 获取当前点击的li
					currentLi.addClass('active').siblings().removeClass('active') // 给当前li增加类给其他兄弟li删除类
					const name = currentLi.attr('product-name') // 获取当前li的地址
					updateHtml(name) // 将选择的地址传入更新函数中，重现渲染图片
				});
			});
		</script>
	</head>
	<body>
		<div class="main">
			<div class="banner-wrap">
				<div class="rtx-top">
					<div class="rtx-top-banner">
						<h1 class="title">赵思源</h1>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="panel">
					<div class="panel-left">
						<dl class="keyword-list">
							<dt>热门主题游</dt>
							<dd>
								<span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">海
										岛</a></span>
							</dd>
							<dd>
								<span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">古
										镇</a></span>
							</dd>
							<dd>
								<span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">蜜
										月</a></span>
							</dd>
							<dd>
								<span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">亲
										子</a></span>
							</dd>
							<dd>
								<span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">美
										食</a></span>
							</dd>
							<dt>热门目的地</dt>
							<dd>
								<span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">黄山
									</a></span>
							</dd>
							<dd>
								<span class="entrance-item"><a href="https://www.baidu.com/"
										target="_blank">上海</a></span>
							</dd>
							<dd>
								<span class="entrance-item"><a href="https://www.baidu.com/"
										target="_blank">杭州</a></span>
							</dd>
						</dl>

					</div>
					<div class="panel-right">
						<ul class="product-nav">

						</ul>
						<div class="produce-content">

						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
